<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="change">点击修改数据</button>
    <h4>{{ info }}</h4>
    <p v-for="item in odd" :key="item">{{ item }}</p>
    <h3>{{ comInfo }}</h3>
    <h2>{{ num }}</h2>
    <button @click="store.add(10)">点击++</button>
    <button @click="storeFun.changeInfo">点击修改info数据</button>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
// 引入设置的仓库
import { useStore } from '@/store';
import { useFun } from '@/store/fun';

//把创建的store实例化
let store = useStore();
let storeFun = useFun();

//从store中解构数据
let  { msg,odd,num } = storeToRefs(store);
let {info,comInfo} = storeToRefs(storeFun);
/*
使用 $patch 方法，可以进行批量修改数据
*/
let change = ()=>{
  store.$patch({
    msg:'凿壁偷光'
  });
};

</script>

<style lang="scss" scoped>

</style>